<template>
  <div class="map_main">
    <div id="container"></div>
    <div class="tips">点击右键绘制 / 删除圆形</div>
    <div class="tips2">鼠标移入查看点标记详细信息</div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      centerIP: [104.06, 30.54], //默认中心点
      zoom: 9, //地图缩放比
      markers: [], //存放所有的点标记
      positions: [], //随机生成500个点
      map: "", //map实例化对象
      layer: "", //layer实例化对象
      circle: "",
      nowMarker: "", //当前点标记
      rightMarker: [], //右键点击的经纬度
    };
  },
  mounted() {
    this.initMap();
  },
  computed: {
    ...mapState(["markerList", "newCenterIP"]),
  },
  watch: {
    markerList(val) {
      this.positions = val;
      this.centerIP = [104.06, 30.54];
      this.initMap();
      this.addMarkers();
    },
    newCenterIP(val) {
      this.map.setZoomAndCenter(13, val);
    },
  },
  methods: {
    ...mapMutations(["setLastItems"]),
    /**
     * 初始化地图组件
     */
    initMap() {
      let that = this;
      //新建一个地图组件
      let map = new AMap.Map("container", {
        zoom: this.zoom,
        center: this.centerIP,
        mapStyle: "amap://styles/normal",
        resizeEnable: true,
        features: ["bg", "road", "building", "point"],
      });

      // 创建 AMap.LabelsLayer 图层
      let layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        collision: false,
      });

      // 将图层添加到地图
      map.on("complete", function () {
        this.map.add && this.map.add(layer);
      });

      //创建右键菜单
      let contextMenu = new AMap.ContextMenu();
      //绘制圆形
      contextMenu.addItem(
        "绘制圆形",
        () => {
          if (this.circle != "") {
            this.map.remove(this.circle);
          }
          this.makePolygon();
        },
        0
      );
      //清除圆形
      contextMenu.addItem(
        "删除圆形",
        () => {
          if (this.circle != "") {
            this.map.remove(this.circle);
          }
        },
        0
      );
      //地图绑定鼠标右击事件——弹出右键菜单
      map.on("rightclick", function (e) {
        contextMenu.open(map, e.lnglat);
        that.rightMarker = [e.lnglat.lng, e.lnglat.lat];
      });

      // 赋值
      this.map = map;
      this.layer = layer;
    },
    /**
     * 添加海量点标记
     */
    addMarkers() {
      this.markers = [];
      let icon = new AMap.Icon({
        type: "image",
        image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        size: new AMap.Size(20, 30),
        imageSize: new AMap.Size(10, 16),
        anchor: "bottom-center",
      });
      //循环生成所有的点标记
      for (let i = 0; i < this.positions.length; i++) {
        let curPosition = this.positions[i].place;
        let txt = this.positions[i].id;
        let marker = new AMap.Marker({
          position: curPosition,
          icon: icon,
          title: `点标记${txt}：${curPosition}`,
        });
        this.markers.push(marker);
      }

      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.markers);
    },
    /**
     * 绘制圆形形
     */
    makePolygon() {
      let circle = new AMap.Circle({
        center: this.rightMarker,
        radius: 1200000, //半径
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        showCircle: true,
        zIndex: 50,
        bubble: true,
      });
      this.circle = circle;
      this.map.add(circle);
      this.computeDis();
    },

    // 判断点是否在圆中
    computeDis() {
      let m2 = new AMap.Marker({
        position: this.rightMarker,
      });
      for (let i = 0; i < this.markers.length; i++) {
        let p1 = this.markers[i].getPosition();
        let p2 = m2.getPosition();
        let distance = Math.round(p1.distance(p2));
        if (distance <= 1200000) {
          this.delPositinsList(p1.lng, p1.lat);
          this.map.remove(this.markers[i]);
          this.markers.splice(i, 1);
          this.map.remove(this.nowMarker);
        }
      }
    },
    //将当前圆中删除的点也在列表中删除
    delPositinsList(val1, val2) {
      this.positions = this.positions.filter((item) => {
        return item.place[0] != val1 && item.place[1] != val2;
      });
      this.setLastItems(this.positions);
    },
  },
};
</script>

<style scoped>
.map_main {
  width: 100%;
  height: 100%;
  position: relative;
}
.tips,
.tips2 {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: white;
  padding: 4px;
  font-size: 12px;
}
.tips2 {
  top: 50px;
}
#container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
